<script lang="tsx">
import { TableLoading, type TColumn } from '~comp/table';
import { useGameInfoQuery } from '../../helpers';
import ShowMoreBtn from './ShowMoreBtn.vue';
import { useGameRecord } from './useGameRecord';

function TypeLabel(text: string, icon: string) {
  return (
    <span>
      <i class={`align-middle mr-1 -mt-1 ${icon}`} />
      { text }
    </span>
  );
}

function useRecordType() {
  const authed = useAuthed();
  const typeList = computed(() => [
    {
      value: 'my',
      label: TypeLabel($t('sUwwscEu1TkV4xPx8ca9'), 'i-local:games--my-log?mask text-1.1em'),
    },
    {
      value: 'all',
      label: TypeLabel($t('pmn0mKr4K75mpn33BpIff'), 'i-local:games--dice?mask text-1.2em'),
    },
  ]);
  const type = ref('all');

  watch(authed, (authed) => {
    type.value = authed ? 'my' : 'all';
  }, { immediate: true });

  return { typeList, type };
}
</script>

<script setup lang="tsx">
const props = defineProps<{
  gameCode: string;
}>();

const authed = useAuthed();
const [setEle, eleBp] = useElementBreakpoint({});
const { gameInfo } = useGameInfoQuery(() => props.gameCode);
const { typeList, type } = useRecordType();
const myGameLog = useGameRecord('addMyLog');
const allGameLog = useGameRecord('addAllLog');

const allLogColumns = computed<TColumn[]>(() => [
  { key: 'game', name: $t('zQfkOQfqezj1l2vBna94o'), show: eleBp.value['3xl'] },
  { key: 'time', name: $t('vSWndcqBgbF9tlnzy6ZR') },
  { key: 'user', name: $t('0vtXdkqCewwMhiUxQuk4s') },
  { key: 'amount', name: $t('plHorg6dj8ZgRdr4b24gt'), show: eleBp.value['3xl'] },
  { key: 'multiplier', name: $t('gaNlzHcdnlP1pk6diOFjB'), show: eleBp.value.xl },
  { key: 'profit', name: $t('iygk8Ly05wCeUYc1LrlRp'), class: 'text-right' },
]);
const myLogColumns = computed<TColumn[]>(() => [
  { key: 'game', name: $t('zQfkOQfqezj1l2vBna94o'), show: eleBp.value['2xl'] },
  { key: 'time', name: $t('vSWndcqBgbF9tlnzy6ZR') },
  { key: 'amount', name: $t('plHorg6dj8ZgRdr4b24gt'), show: eleBp.value['2xl'] },
  { key: 'multiplier', name: $t('gaNlzHcdnlP1pk6diOFjB') },
  { key: 'profit', name: $t('iygk8Ly05wCeUYc1LrlRp'), class: 'text-right' },
  // { key: 'share', name: '' },
]);

function isDisplayLess(size: number) {
  return size <= 10 && eleBp.value.lt3xl;
}

function openGameRecordDetail(orderNo: string) {
  globalPopups.gameRecordDetail.open({ gameCode: props.gameCode, orderNo });
}
</script>

<template>
  <div :ref="setEle">
    <!-- 头部 -->
    <div class="mb-3 flex items-center">
      <ASegmented
        v-model:value="type"
        class="w-full text-base" :class="[eleBp.xl ? 'max-w-80' : 'w-full']"
        block :options="typeList"
      />
    </div>

    <!-- 我的记录 -->
    <TCard v-show="type === 'my'" class="lt-tablet:p-3">
      <TSuspenseView nonSuccessClass="min-h-70" :status="myGameLog.status">
        <div class="game-record-wrapper overflow-y-auto" :class="[eleBp.lt3xl ? 'h-85' : 'h-146']">
          <TTable
            class="game-record" indexId="id" :columns="myLogColumns"
            :data="isDisplayLess(myGameLog.pageSize) ? myGameLog.list.slice(0, 5) : myGameLog.list"
            @clickRow="openGameRecordDetail($event.id)"
          >
            <template #game-td>
              <div class="cursor-pointer text-sys-text-body">
                {{ gameInfo?.ename }}
              </div>
            </template>
            <template #time-td="{ row }">
              <span class="text-sys-text-body">{{ $d(row.time, 'time') }}</span>
            </template>
            <template #amount-td="{ row }">
              <TAmount :value="row.betAmount" :symbol="row.currency" iconPos="left" :decimals="8" format="pad-dec" />
            </template>
            <template #profit-td="{ row }">
              <TAmount :value="row.profitAmount" :symbol="row.currency" iconPos="left" :decimals="8" format="pad-dec" colored="pos" />
            </template>
          <!-- <template #share-td>
            <div class="ml-auto size-7 flex-center cursor-pointer rounded-2 bg-sys-layer-d text-4 text-sys-text-body -my-0.5 hover:(bg-sys-layer-e text-sys-text-head)">
              <i class="i-ic:outline-share" />
            </div>
          </template> -->
          </TTable>
          <ShowMoreBtn
            v-if="myGameLog.list.length >= 10"
            v-model:pageSize="myGameLog.pageSize"
            class="show-more-btn"
          />
        </div>

        <template #pending>
          <TableLoading />
        </template>

        <template v-if="!authed" #empty>
          <TEmpty class="h-80">
            <I18nT keypath="ejifhh6PhQc0y3sihaBn3">
              <template #text>
                &nbsp;<span class="url-yellow-underline" @click="globalPopups.sign.open()">{{ $t('qwZi820O3qWpsae62Juc') }}</span>
              </template>
            </I18nT>
          </TEmpty>
        </template>
      </TSuspenseView>
    </TCard>

    <!-- 全部记录 -->
    <TCard v-show="type === 'all'" class="lt-tablet:p-3">
      <TSuspenseView nonSuccessClass="min-h-70" :status="allGameLog.status">
        <div class="game-record-wrapper overflow-y-auto" :class="[eleBp.lt3xl ? 'h-85' : 'h-146']">
          <TTable
            class="game-record" indexId="id" :columns="allLogColumns"
            :data="isDisplayLess(allGameLog.pageSize) ? allGameLog.list.slice(0, 5) : allGameLog.list"
            @clickRow="openGameRecordDetail($event.id)"
          >
            <template #game-td>
              <div class="cursor-pointer text-sys-text-body">
                {{ gameInfo?.ename }}
              </div>
            </template>
            <template #time-td="{ row }">
              <span class="text-sys-text-body">{{ $d(row.time, 'time') }}</span>
            </template>
            <template #user-td="{ row }">
              <template v-if="row.user">
                <div
                  class="flex cursor-pointer items-center py-2 -my-3"
                  @click.stop="globalPopups.userProfile.open({ userId: row.user?.uid })"
                >
                  <TAvatar class="mr-2 w-6" :avatar="row.user.avatar" :level="row.user.level" />
                  <span class="w-30 truncate" :class="{ '!w-27': eleBp.ltmd }">{{ row.user.nickname }}</span>
                </div>
              </template>
              <div v-else />
            </template>
            <template #amount-td="{ row }">
              <TAmount :value="row.betAmount" :symbol="row.currency" iconPos="left" :decimals="8" format="pad-dec" />
            </template>
            <template #profit-td="{ row }">
              <TAmount :value="row.profitAmount" :symbol="row.currency" iconPos="left" :decimals="8" format="pad-dec" colored="pos" />
            </template>
          </TTable>
          <ShowMoreBtn
            v-if="allGameLog.list.length >= 10"
            v-model:pageSize="allGameLog.pageSize"
            class="show-more-btn"
          />
        </div>

        <template #pending>
          <TableLoading />
        </template>
      </TSuspenseView>
    </TCard>
  </div>
</template>

<style lang="scss" scoped>
.log-type-select {
  width: 100%;

  :deep(.ant-select-selector) {
    --uno: 'text-base';
  }

  //:deep(.ant-select-selection-item) {
  //  --uno: 'font-600 text-sys-text-head';
  //}
}

.game-record-wrapper {
  @supports (scrollbar-gutter: stable) {
    scrollbar-gutter: stable;
    margin-right: -8px;
    padding-right: 4px;
  }

  @media (hover: none) {
    scrollbar-gutter: auto;
  }

  .game-record :deep(thead) {
    --uno: 'sticky top-0 z-2';

    @at-root :root.ios & {
      top: -4px !important;
    }
  }

  .game-record :deep(tr td) {
    --uno: 'cursor-pointer';

    > * {
      vertical-align: middle;
    }
  }

  .show-more-btn {
    --uno: 'sticky bottom-0 z-2';
  }
}
</style>
